<template>
  <a-modal
    :title="form && form.id ? '修改招聘' : '新建招聘'"
    centered
    :visible="visible"
    :confirmLoading="loading"
    destroyOnClose
    @ok="handleOk"
    width="50vw"
    @cancel="() => { $emit('cancel') }"
  >
    <a-spin :spinning="loading">
      <a-form-model ref="ruleForm" class="ruleForm" :model="form"
                    :rules="rules" v-bind="formLayout" labelAlign="left">
        <a-form-model-item ref="name" label="岗位名称" prop="name">
          <a-input :disabled="disabled" v-model="form.name"/>
        </a-form-model-item>
        <a-form-model-item ref="dept" label="部门" prop="dept">
          <a-tree-select
            :disabled="disabled"
            placeholder="请选择部门"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
            :replaceFields="{children:'children', title:'name', key:'id', value: 'id' }"
            v-model="form.dept"
            :tree-data="treeData"
            tree-default-expand-all
          />
        </a-form-model-item>
        <a-form-model-item ref="money" label="薪资" prop="money">
          <a-input :disabled="disabled" v-model="form.money"/>
        </a-form-model-item>
        <a-form-model-item ref="tag" label="岗位标签" prop="tag">
          <div class="tag-list">
              <template v-for="(item, index) in tags">
                <div class="tag-list-item" :key="index">
                  <div class="tag-list-text">
                    <a-input :disabled="disabled" :maxLength="20" placeholder="请输入标签" v-model="item.text" />
                  </div>
                  <div class="tag-list-group">
                    <a-button ghost type="danger" icon="delete" v-if="index !== 0" @click="handleDelete(index)"/>
                    <a-button ghost type="primary" icon="plus" v-if="index === 0" @click="handleAdd"/>
                  </div>
                </div>
            </template>
          </div>
        </a-form-model-item>
        <a-form-model-item ref="address" label="位置" prop="address">
          <a-input :disabled="disabled" v-model="form.address"/>
        </a-form-model-item>
        <a-form-model-item ref="describe" label="岗位职责" prop="describe">
          <editor :disabled="disabled" :values="form.describe" @change="handleEditor"/>
        </a-form-model-item>
        <a-form-model-item ref="status" label="启用/停用" prop="status">
          <a-select :disabled="disabled" v-model="form.status">
            <a-select-option value="1">
              启用
            </a-select-option>
            <a-select-option value="2">
              停用
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import editor from '@/components/Editor/WangEditor'
import {getList as getDept} from '@/api/dept'
export default {
  components: {
    editor
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4}
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 20}
      }
    }
    return {
      tags: [
        {
          text: undefined
        }
      ],
      treeData:[],
      form: {
        id: undefined,
        name: undefined,
        code: undefined,
        tag: undefined,
        dept:undefined,
        describe: undefined,
        describe_text: undefined,
        address: undefined,
        status: "1",
      },
      disabled: false,
      rules: {
        name: [
          { required: true, message: '请输入招聘名称', trigger: 'blur' },
        ],
          dept: [
          { required: true, message: '请选择部门', trigger: 'change' },
        ],
      },
    }
  },
  created() {
    this.$watch('model', () => {
      this.disabled = this.model.disabled
      this.form = {
        ...this.form,
        ...this.model
      };
      this.tags = this.form.tag ? this.form.tag.split('|').map(item => {
        return {
          text: item
        }
      }) : [
        {
          text: undefined
        }
      ]
      this.form.dept = this.form.dept ? parseInt(this.form.dept) : undefined;
    })
     this.$watch('visible', (e) => {
      if (e) {
        this.getDeptList()
      }
    })
  },
  methods: {
    handleEditor(e) {
      this.form.describe = e.html;
      this.form.describe_text = e.text;
    },
    getDeptList() {
      getDept().then(ret => {
        this.treeData = ret.data
      })
    },
    handleAdd() {
      if (this.disabled) {
        return false
      }
      if (this.tags.length >= 5) {
        this.$message.warning('最多添加5项');
        return false;
      }
      this.tags.push({text: undefined})
    },
    handleDelete(e) {
      this.tags.splice(e, 1)
    },
    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.form.tag = this.tags[0].text ? this.tags.map(e => e.text).join("|") : ""
          this.form.dept = this.form.dept.toString()
          this.$emit('ok', this.form)
        } else {
          return false;
        }
      });
    },
    resetFields() {
      this.$refs.ruleForm.resetFields();
      this.tags = [
        {
          text: undefined
        }
      ];
      this.form = {
        id: undefined,
        parent_id: undefined,
        name: undefined,
        describe: undefined,
        describe_text: undefined,
        code: undefined,
        sort: undefined,
        dept:undefined,
        status: "0",
      };
    },
  }
}
</script>
<style lang="less" scoped>
  .tag-list {
    &-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  #map-container {
    width: 100%;
    height: 40vh;
  }
  .map {
    width: 100%;
    height: 40vh;
    position: relative;
    iframe {
      width: 100%;
      height: 40vh;
    }
  }

  .ruleForm {
    height: 50vh;
    overflow-y: scroll;
    &::-webkit-scrollbar {
      display: none;
    }
  }
</style>